<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<%@ page language="java" pageEncoding="utf-8"%>
<%@ page contentType="text/html;charset=UTF-8" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ page isELIgnored="false" %>

<html>
<head>
    <meta charset ="utf-8" />
    <meta name="renderer" content="webkit" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <meta name="viewport" id="viewportMeta" content="width=device-width,initial-scale=1,user-scalable=no" />
    <meta name="keywords" content="notebike" />
    <meta name="description" content="notebike" />
    <meta name="author" content="ParkerKe" />
    <meta name="apple-mobile-web-app-capable" content="yes" />
    <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
    <meta name="format-detection" content="telephone=no, email=no" />
    <meta name="x5-orientation" content="portrait" />   <%-- 强制竖屏--%>


    <script src="/htmlFive/weixin/js/common/jquery.min.js" ></script>
    <script src="/htmlFive/weixin/js/common/bootstrap.min.js"></script>
    <script src="/htmlFive/weixin/js/common/jquery-weui.min.js"></script>
    <%--<script src="/htmlFive/weixin/js/common/myFunction.js"></script>  --%>


    <link rel="stylesheet"  href="/htmlFive/weixin/css/common/weui.css" />
    <link rel="stylesheet"  href="/htmlFive/weixin/css/common/jquery-weui.min.css" />
    <link rel="stylesheet"  href="/htmlFive/weixin/css/common/bootstrap.min.css" />


    <%--<link rel="stylesheet"  href="/htmlFive/weixin/css/mytake.css"/>--%>
    <link rel="stylesheet"  href="/htmlFive/weixin/css/common/flexible_css.css" />
    <script src="/htmlFive/weixin/js/common/flexible.js"></script>
    <%--单位：rem--%>

    <title>东城水公园智能储物柜存取系统</title>
    <style>
        #container{
            height:100%;
        }
        .con-nav{
            height: 1.25rem;
            width: 100%;
            padding: 0 3%;
            position: fixed;
            top: 0;
            z-index: 99;
            background-color: #fff;
            box-shadow: 0 0.03rem 0.0625rem #ebebeb;
            text-align: center;
            line-height: 1.25rem;
            font-size: 0.5rem;
            font-weight: 600;
            letter-spacing: 2px;
        }
        .login-box{
            /*position: absolute;*/
            width: 100%;
            /*left: 0;*/
            /*top: 1.25rem;*/
            margin-top:1.25rem;
            overflow-x: hidden;
            overflow-y: scroll;
        }
        .login-box .step{
            min-height: 85%;
        }
        .login-form{
            margin: 10% 5%;
            overflow: hidden;
        }
        .control-toggle{
            margin-bottom: .5rem;
            border-bottom: 2px solid #ececec;
            display: flex;
            justify-content: space-between;
            font-size: 0.4rem;
        }
        .control-toggle>a{
            display: block;
            width:40%;
            text-align: center;
            padding: 2% 5%;
            font-size: 0.46rem;
            color:#1f1f1f;
            text-decoration: none;

        }
        .active{
            border: none;
            border-bottom-color: #E40013;
            border-bottom-style: solid;
        }

        .toggle-box{
            width:200%;
            padding:0 6%;
            display: flex;
            transform: translateX(0%);
            justify-content: space-between;
            transition:transform 0.3s  ease;
        }
        .login-test{
            width:94%;
            margin-right:6%;
        }
        .login-pas{
            width:94%;

        }
        .login-test input{
            display: block;
            width:100%;
            height: 1.25rem;
            padding: 1% 1.2rem 1% .25rem;
            margin-bottom:0.3rem;
            line-height: 100%;
            border-radius:6px;
            font-size: 0.4rem;

        }
        .login-test .test-code{
            width:100%;
            height: 1.25rem;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
        .test-code>.input-box>input{
            width:90%;
            margin:0;
        }
        .test-code>button{
            width: 30%;
            height:100%;
            border-radius: 6px;
        }
        .login-pas>.input-box>input{
            display: block;
            width:100%;
            height: 1.25rem;
            padding: 1% 1.2rem 1% .25rem;
            margin-bottom:0.3rem;
            /*outline-offset: 0;*/
            line-height: 100%;
            border-radius:6px;
            font-size: 0.4rem;
        }
        .tips{
            width:100%;
            padding: 0 6%;
            height:1rem;
        }
        .tips>.tips-content{
            font-size: 0.36rem;
            color:#E40013;
            overflow: hidden;
            white-space: nowrap;
            text-overflow:ellipsis ;
        }
        .login-btn{
            width:100%;
            padding: 0 6%;
            margin-top:0.2rem;
        }
        .login-btn button{
            width: 100%;
            height: 1.3rem;
            border-radius:6px;
            color: #fff;
            font-size: 0.5rem;
            background-color: #337ab7;
            border-color: #2e6da4;
        }
        /*.login-btn button:hover{*/
            /*color: #fff;*/
            /*background-color: #286090;*/
            /*border-color: #204d74;*/
        /*}*/
        .login-btn button:nth-child(2){
            margin-top:0.5rem;
        }
        .phone{
            position: relative;
        }

        /*弹窗*/
        .popupModel{
            margin-top:15%;
        }
        .model-btn>div{
            width: 80%;
            /*background: #04BE02;*/
            /*border-color: #04BE02;*/
            padding: 0;
            height: 1rem;
            text-align: center;
            line-height: 1rem;
            /*display: flex;*/
            /*justify-content: center;*/
            /*align-items: center;*/
            margin: 0.2rem auto !important;
            margin-bottom: 0.33rem;
        }
        .modal-footer{
            text-align: center;
        }
        .psd-box{
            width: 100%;
            padding-top:0.3rem;
            display: flex;
            flex-wrap: wrap;
            align-items: center;
            justify-content: center;
        }
        .psd-box>.reg-code{
            width: 80%;
            height: 1.25rem;
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 0.3rem;
        }
        .psd-box>.reg-code>.input-box{
            width: 100%;
        }
        .psd-box>.reg-code input{
            width: 90%;
            display: block;
            height: 1.25rem;
            padding: 1% 1.2rem 1% .25rem;
            line-height: 100%;
            border-radius: 6px;
            font-size: 0.4rem;
        }
        .psd-box>.reg-code button{
            width: 30%;
            height: 100%;
            border-radius: 6px;
        }


        .psd-box>.input-box>input{
            width:100%;
            display: block;
            height: 1.25rem;
            padding: 1% 1.2rem 1% .25rem;
            margin-bottom: 0.3rem;
            line-height: 100%;
            border-radius: 6px;
            font-size: 0.4rem;
        }
        .reset-pas{
            width:100%;
            padding: 0 6%;
            height:1rem;
            line-height: 1rem;
            text-align: right;
            font-weight: 600;
            color:#337ab7;
            font-size: 0.4rem;
        }
        /*input图标*/
        .input-box{
            position: relative;
        }
        .phoneIcon{
            position: absolute;
            top:0.32rem;
            left:0.2rem;
            width:0.6rem;
        }
        input{
            padding-left:1rem !important;

        }
        input:focus{
            outline:none;
            border: 1px solid #337ab7;
        }
    </style>
</head>

<body>
    <div id="container">
        <div class="con-nav">
            LOGIN
        </div>
        <div class="login-box">
            <div class="step">
                <div class="login-form">
                    <div class="control-toggle">
                        <a name="testCode"  class="active">免密登录</a>
                        <a name="password">账号登录</a>
                    </div>
                    <div class="toggle-box">
                        <div class="login-test">
                            <div class="input-box">
                                <input id="telphone" class="phone" type="text" placeholder="手机号">
                                <img class="phoneIcon" src="/htmlFive/common/icons/phone.png" alt="">
                            </div>
                            <div class="test-code">
                                <div class="input-box" style="width: 70%;">
                                    <input type="text" class="codeVal" placeholder="验证码">
                                    <img class="phoneIcon" src="/htmlFive/common/icons/code.png" alt="">
                                </div>
                                <button class="get-code">获取验证码</button>
                            </div>
                        </div>
                        <div class="login-pas">
                            <div class="input-box">
                                <input class="phone" type="text" placeholder="手机号">
                                <img class="phoneIcon" src="/htmlFive/common/icons/phone.png" alt="">
                            </div>
                            <div class="input-box">
                                <input type="password" class="loginPas" placeholder="请输入6至12位密码">
                                <img class="phoneIcon" src="/htmlFive/common/icons/psd.png" alt="">
                            </div>


                        </div>
                    </div>
                    <div class="tips">
                        <p class="tips-content"></p>
                    </div>
                    <div class="login-btn">
                        <div>
                            <button class="go-login">登录</button>
                            <button class="go-register">注册</button>
                        </div>
                    </div>
                    <div class="reset-pas">
                        <p class="reset-btn">忘记密码</p>
                    </div>
                </div>
            </div>
        </div>

    </div>


    <!--注册-->
    <div class="modal fade popupModel" id="register" data-keyboard="false" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <div class="model-title" style="font-size:0.4rem;font-weight:600; " >注册账号</div>
                </div>
                <div class="modal-body">
                    <div class="psd-box">
                        <div class="input-box" style="width:80%;">
                            <input id="regPhone"  class="phone" onkeyup="if(event.keyCode !=37 && event.keyCode !=39)value=value.replace(/\D/g,'');" placeholder="请输入手机号"   type="text" >
                            <img class="phoneIcon" src="/htmlFive/common/icons/phone.png" alt="">
                        </div>
                        <div class="reg-code">
                            <div class="input-box">
                                <input class="regCode-val" type="text"  placeholder="验证码">
                                <img class="phoneIcon" src="/htmlFive/common/icons/code.png" alt="">
                            </div>
                            <button class="get-regcode">验证码</button>
                        </div>
                        <div class="input-box" style="width:80%;">
                            <input id="regPassword"  placeholder="请输入6至12位密码"   type="password">
                            <img class="phoneIcon" src="/htmlFive/common/icons/psd.png" alt="">
                        </div>
                        <div class="input-box" style="width:80%;">
                            <input id="againPassword"  placeholder="确认密码"   type="password">
                            <img class="phoneIcon" src="/htmlFive/common/icons/psd.png" alt="">
                        </div>
                    </div>
                </div>
                <div class="modal-footer model-btn">
                    <div  class="btn btn-primary" id="submitPas">确认</div>
                    <div  class="btn btn-primary" id="submitNewPas" style="display: none;">确认修改</div>
                    <div  class="btn btn-default" data-dismiss="modal">取消</div>
                </div>
            </div>
        </div>
    </div>
</body>
<script>
$(function () {

    console.log(6666);
var tel;
var timer;
var timerCode;
var isWay=1;
$('.control-toggle>a').click(function () {
    console.log(6666);
    var $this=$(this);
    var name=$this.attr('name');
    console.log(name);
    $('.control-toggle>a').removeClass('active');
    $this.addClass('active');
     $('.tips-content').html('');
     $('input').val('');


    clearTimer();
    if(name=='testCode'){
        $('.toggle-box').css( 'transform','translateX(0%)');
        isWay=1;
        tel=0;
    }else if(name=='password'){
        $('.toggle-box').css( 'transform','translateX(-50%)');
        isWay=2;
        tel=0;
    }

});

//获取验证码
$('.get-code').click(function () {
    console.log(tel);
    if(tel){
        var dom=$(this);
        time(dom);
    }else{
        $('.tips-content').html('请输入手机号码');
    }

});

    //验证号码格式
$('.phone').blur(function(e){
        var phoneVal=$(this).val();
        if(!(/^1[3456789]\d{9}$/.test(phoneVal))){
            $('.tips-content').html('请输入正确的手机号码');
            $(this).val('');
            tel=0;
        }else{
            tel= $(this).val();
            $('.tips-content').html('');
        }
});


$('.go-login').click(function () {  //登录
    //console.log(isWay);
    if(isWay==1){ //yzm登录
        var codeVal=$('.codeVal').val();
        console.log(/^\d{4}$/.test(codeVal));
        if(tel!=0 && tel!=undefined){
            if(/\d{4}/g.test(codeVal)){
                console.log(tel,codeVal);
                $('.tips-content').html('');
                $('.codeVal').val('');
                clearTimer();
                var url='';
                var data={telPhone:tel,code:codeVal};
                var result=requestLogin(url,data);
                if(result.err_code==0){
                    console.log('登录');

                }else{
                    $.toast('验证码错误','text');
                }
            }else{
                $('.codeVal').val('');
                $('.tips-content').html('请输入正确的验证码');
            }
        }else{
            $('.tips-content').html('请输入手机号码');
        }
    }else if(isWay==2){ //账号密码登录
        console.log(tel);
        var loginPas=$('.loginPas').val();
        if(tel!=0 && tel!=undefined){
            if(loginPas.length>=6 && loginPas.length<=12){
                $('.tips-content').html('');
                console.log(tel,loginPas);
            }else{
                $('.loginPas').val('');
                $('.tips-content').html('请输入正确的密码');
            }
        }else{
            $('.tips-content').html('请输入手机号码');
        }

    }


});

$('.go-register').click(function () {//注册账号
    $('.model-title').html('注册账号');
    $('#submitPas').css('display','block');
    $('#submitNewPas').css('display','none');
    $('#regPhone').val('');
    $('#regPassword').val('');
    $('#againPassword').val('');
    $('.regCode-val').val('');
    $('#register').modal('show');
    clearTimerCode();
});

$('#submitPas').click(function () { //注册-提交账号密码
    var data=reset();
    if(data){
        console.log(data);
        $('#register').modal('hide');
        clearTimerCode();
    }

});
//忘记密码
$('.reset-btn').click(function(){
    $('.model-title').html('重置密码');
    $('#submitPas').css('display','none');
    $('#submitNewPas').css('display','block');

    $('#regPhone').val('');
    $('#regPassword').val('');
    $('#againPassword').val('');
    $('.regCode-val').val('');
    $('#register').modal('show');
     clearTimerCode();
});

$('#submitNewPas').click(function () { //重置提交密码
    var data=reset();
    if(data){
        console.log(data);
        $('#register').modal('hide');

        clearTimerCode();
    }

});
$('.get-regcode').click(function () {  //弹窗验证码
    var regPhoneC=$('#regPhone').val();
    if(!(/^1[3456789]\d{9}$/.test(regPhoneC))){
        $.toast('请输入正确的手机号码','text');
        return;
    }else {
        var dom = $(this);
        timeCode(dom);
    }

});

function reset(){  //弹窗内容验证
    var regPhone=$('#regPhone').val();
    var regPassword=$('#regPassword').val();
    var againPassword=$('#againPassword').val();
    var regCodeVal=$('.regCode-val').val();
    if(!(/^1[3456789]\d{9}$/.test(regPhone))){
        $.toast('请输入正确的手机号码','text');
        return;
    }else{
        if(/\d{4}/g.test(regCodeVal)){
           // console.log(tel,regCodeVal);
        }else{
            $('.regCode-val').val('');
            $.toast('请输入正确的验证码','text');
            return;
        }

    }
    var pasLength=Number(regPassword.length);
    if(pasLength>12 || pasLength<6){
        $.toast('请输入6至12位密码','text');
        return;
    }

    if(againPassword.length==0){
        $.toast('请再次输入密码','text');
        return;
    }
    if(regPassword!=againPassword){
        $.toast('两次输入密码不同，请重新输入','text');
        return;
    }
   // console.log(regPhone,regPassword,againPassword);
    return [regPhone,regPassword,againPassword];


}

function clearTimer() {
    clearTimeout(timer);
    $('.get-code').removeAttr("disabled");
    $('.get-code').html('获取验证码');
    wait=60;
}
function clearTimerCode() {
    clearTimeout(timerCode);
    $('.get-regcode').removeAttr("disabled");
    $('.get-regcode').html('验证码');
    waitCode=60;
}


//60秒之后获取验证码
var wait=60;
function time(obj) {
    if (wait == 0){
        obj.removeAttr("disabled");
        obj.html('获取验证码');
        wait = 60;
    } else {
        obj.attr("disabled",true);
        obj.html(wait+"s");
        wait--;
        timer=setTimeout(function(){
            time(obj);
        },1000);
    }
}

//60秒之后获取验证码
var waitCode=60;
function timeCode(obj) {
        if (waitCode == 0){
            obj.removeAttr("disabled");
            obj.html('获取验证码');
            waitCode = 60;
        } else {
            obj.attr("disabled",true);
            obj.html(waitCode+"s");
            waitCode--;
            timerCode=setTimeout(function(){
                timeCode(obj);
            },1000);
        }
}

function requestLogin(url,data) {
    var result;
    $.ajax({
        type: 'POST',
        dataType: 'json',
        async:false,
        url: url,
        data: data,
        contentType: 'application/x-www-form-urlencoded',
        success: function(res){
            result=res;
        }
    });
    return result;
        //console.log(res);
}


function requestLogin2(url,data,callback) {
    $.ajax({
        type: 'POST',
        dataType: 'json',
        async:false,
        url: url,
        data: data,
        contentType: 'application/x-www-form-urlencoded',
        success: function(res){
            callback(res);
        }
    });
}


})
</script>

</html>












